
/**
 * @desc 考级管理，新增/修改弹框
 * @author yd_zhaorongjun
 */
<template>
  <div>
    <el-dialog
      :title="title"
      class="gl_dialog_TitleLine"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :before-close="close"
      width="880px"
    >
      <el-scrollbar wrap-class="scrollbar-wrapper gl_dialog_height">
        <el-form ref="LevelVO" class="gl_form_mini" :model="LevelVO" :rules="LevelVO_Rules" label-position="right" label-width="140px" style="padding-right: 60px;">
          <el-row :gutter="20">
            <el-col :span="24">
              <!-- 考级标题 -->
              <el-form-item label="考级标题" prop="levelName">
                <el-input v-model="LevelVO.levelName" placeholder="请输入考级标题" name="levelName" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <!-- 考级项目 -->
              <el-form-item label="考级项目">
                <el-radio-group v-model="LevelVO.levelItems" size="mini">
                  <el-radio-button label="1">项目1</el-radio-button>
                  <el-radio-button label="2">项目2</el-radio-button>
                  <el-radio-button label="3">项目3</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <!-- 评判标准 -->
              <el-form-item label="评判标准">
                <el-radio-group v-model="LevelVO.evaluation" size="mini">
                  <el-radio-button label="1">分数制</el-radio-button>
                  <el-radio-button label="2">等级制</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <!-- 总分值 -->
              <el-form-item label="总分值" prop="total">
                <el-input-number v-model="LevelVO.total" style="width:110px" controls-position="right" :min="1" :max="100" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!-- 合格分值 -->
              <el-form-item label="合格分值" prop="qualifiedScore">
                <el-input-number v-model="LevelVO.qualifiedScore" style="width:110px" controls-position="right" :min="1" :max="100" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 考级时间 -->
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item label="考级时间" prop="dataList">
                <el-date-picker
                  v-model="LevelVO.dataList"
                  type="daterange"
                  :range-separator="$t('search.to')"
                  :start-placeholder="$t('search.placeholder_Date')"
                  :end-placeholder="$t('search.placeholder_Date')"
                  size="mini"
                  value-format="yyyy-MM-dd"
                  style="width:100%"
                  @change="timeChange"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <!-- 考级地点 -->
              <el-form-item label="考级地点" prop="examinationPlace">
                <el-input v-model="LevelVO.examinationPlace" placeholder="请输入考级地点" name="examinationPlace" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <!-- 升级等级 -->
              <el-form-item label="升级等级" prop="UplevelName">
                <el-input v-model="LevelVO.UplevelName" placeholder="请输入考级通过后,升的等级" name="UplevelName" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>

      <span slot="footer" class="dialog-footer">
        <!-- 取消按钮 -->
        <el-button size="mini" @click="close()">{{ $t('button.cancel') }}</el-button>
        <!-- 保存按钮 -->
        <el-button v-if="type == 'new'" type="primary" size="mini" @click="saveNew()">{{ $t('button.save') }}</el-button>
        <!-- 保存按钮 -->
        <el-button v-else type="primary" size="mini" @click="saveEdit()">{{ $t('button.save') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { LevelVO_Rules } from '@/lib/validate/grade/index.js';
import { LevelVO } from '@/lib/form/grade.js';
// import { translateByCode } from '@/lib/getTransData';

export default {
  name: 'EditLevel',
  data() {
    return {
      LevelVO: new LevelVO(),
      LevelVO_Rules: new LevelVO_Rules(),
      title: '',
      dialogVisible: false,
      type: '' // 弹框状态，是新增和是修改 new 是新增，edit是修改
    };
  },
  computed: {
  },
  methods: {
    open(row) {
      // this.LevelVO = new VO();
      this.type = row ? 'edit' : 'new';
      // 修改考级/添加考级  zh
      this.title = row ? '修改考级' : '添加考级';
      // this.title = row ? translateByCode('grade.editLevel') : translateByCode('grade.addLevel');
      console.log(row);
      this.LevelVO = row || new LevelVO();
      // this.CopyData(this.dto, this.LevelVO);
      this.$nextTick(() => {
        this.dialogVisible = true;
        if (this.$refs.LevelVO) {
          this.$refs.LevelVO.clearValidate();
        }
      });
    },
    // 关闭弹框
    close() {
      this.$refs.LevelVO.clearValidate();
      this.dialogVisible = false;
    },
    // 新增
    saveNew() {
      console.log(this.LevelVO);
      this.$refs.LevelVO.validate(valid => {
        if (!valid) return;
        this.$emit('insert', this.LevelVO);
      });
    },
    // 修改
    saveEdit() {
      console.log(this.LevelVO);
      this.$refs.LevelVO.validate(valid => {
        if (!valid) return;
        this.$emit('update', this.LevelVO);
      });
    },
    // 考级时间时间变化后的方法
    timeChange(val) {
      if (val instanceof Array) {
        this.LevelVO.starTime = val[0];
        this.LevelVO.endTime = val[1];
      } else {
        this.LevelVO.starTime = '';
        this.LevelVO.endTime = '';
      }
      console.log(this.LevelVO);
    }
  }
};
</script>

<style lang="scss">
.labelTitle{
  width:140px;
  display: inline-block;
  text-align: right;
  padding: 0 12px 0 0;
  color: #606266;
  font-weight: 700;
  vertical-align: middle;
}
</style>
